<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 重置样式表 -->
    <link rel="stylesheet" href="../css/normalize.css">

    <!-- 公共样式表 -->
    <link rel="stylesheet" href="../css/common.css">

    <!-- 引入插件css -->
    <link rel="stylesheet" href="../lib/mf/css/magnifier.css">

    <!-- 当前页样式表 -->
    <link rel="stylesheet" href="../css/productDetails.css">

    <!-- 引jq -->
    <script src="../lib/jquery-1.11.3/jquery.js"></script>

    <!-- 引入插件 -->
    <script src="../lib/mf/js/magnifier.js"></script>

    <!-- 引当前js -->
    <script src="../js/productDetails.js"></script>
</head>

<body>
    <!-- 头部 -->
    <div class="head clearfix ">
        <div class="container-fluid">
            <div class="container clearfix">
                <a href="./home.html" class="Cbf fl tx">legochina.cn</a>
                <p class="Cbf fr">欢迎光临<a href="./home.html">乐购</a> ，请<a href="#">登陆</a>\<a href="./login.html">注册</a></p>
                <h1 class="logo"><a href="#"><img src="../imgs/LOGO_02.jpg" alt=""></a></h1>
            </div>
        </div>
        <div class="head-search container clearfix">
            <div class="shopcar fr clearfix">
                <a href="./shopcar.html" class="zt fff car">购物车 3</a>
                <a href="#" class="eb fff">我的订单</a>

            </div>
            <div class="search fr clearfix">
                <input class="fl head-text" type="text" placeholder="创业文具">
                <button class="fl head-btn"></button>
            </div>

        </div>
        <div class="container clearfix">
            <ul class=" head-nav fr clearfix">
                <li><a href="./productList.html">图书</a></li>
                <li><a href="#">电子书</a></li>
                <li><a href="#">原创文学</a></li>
                <li><a href="#">服装</a></li>
                <li><a href="#">户外运动</a></li>
                <li><a href="#">孕婴童</a></li>
                <li><a href="#">家具</a></li>
                <li><a href="#">创意文具</a></li>
                <li><a href="#">地方特产</a></li>
                <li><a href="#">海外购</a></li>
                <li><a href="#">电器城</a></li>
            </ul>
        </div>
    </div>

    <!-- 详情 -->
    <div id="proDetail" class="proDetail container-fluid p20 bgcf3 bs">
        <p class="container">
            <a href="./productList.html">图书</a> >
            <a href="#">小说</a> >
            <a href="#">情感/家庭/婚姻</a> >
            <a href="#">博集天卷</a> >
            <a href="#">白夜行</a>
        </p>
        <div class="container clearfix bgcfff p1020 bs">

            <!--放大镜-->
            <div class="fl">
                <div class="magnifier" id="magnifier1">
                    <div class="magnifier-container">
                        <div class="images-cover"></div>
                        <!--当前图片显示容器-->
                        <div class="move-view"></div>
                        <!--跟随鼠标移动的盒子-->
                    </div>
                    <div class="magnifier-assembly">
                        <div class="magnifier-btn">
                            <span class="magnifier-btn-left">&lt;</span>
                            <span class="magnifier-btn-right">&gt;</span>
                        </div>
                        <!--按钮组-->
                        <div class="magnifier-line">
                            <ul class="clearfix animation03">
                                <li>
                                    <div class="small-img">
                                        <img src="../lib/mf/images/1.png" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="../lib/mf/images/2.png" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="../lib/mf/images/3.png" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="../lib/mf/images/4.png" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="../lib/mf/images/1.png" />
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!--缩略图-->
                    </div>
                    <div class="magnifier-view"></div>
                    <!--经过放大的图片显示容器-->
                </div>
            </div>



            <!--图书详情-->
            <div class="fr bookdetail">
                <div class="p1020">
                    <h2 class="fs20">白夜行</h2>
                    <p class="cf4">《白夜行》作者马克·李维重磅新作，法国连续60周在榜，销量突破120万册</p>
                    <p>[法] 马克·李维 著；杨亦雨 译</p>
                </div>
                <div class="bgcccc p1020 priceDel">
                    <p>
                        <span>乐 购 价：</span>
                        <span class="cf4 f20">&yen;26.20</span> <span>[6.9折] </span>
                        <span>[定价：￥38.00]</span>
                        <span>(降价通知)</span>
                    </p>
                    <p>
                        <span>促销信息：</span>
                        <span class="cred f12">满减 每满150.00元，可减50.00元现金</span>
                        <a href="#">详情 >></a>
                    </p>
                    <p>
                        <span>领 券：</span>
                        <i>100-6</i>
                        <i>200-50</i>
                    </p>
                    <p class="evaluation">
                        <span>累计评价</span>
                        <span class="cf60">10000</span>
                    </p>
                </div>
                <p class="p1020 catCheck">
                    <span>种类选择：</span>
                    <b>平装版</b>
                    <b>精装版</b>
                    <b>豪华版</b>
                    <b>豪华版plus</b>
                </p>

                <div class="clearfix p1020 mt30">
                    <div class="proNum fl">
                        <input class="pronum" type="text" value="1">
                        <a id="addNum">+</a>
                        <a id="reNum">-</a>
                    </div>
                    <p class="addCar fl"><a class="cfff" href="./shopcar.html">加入到购物车</a></p>
                </div>
            </div>


        </div>
    </div>

    <!-- 猜你喜欢 -->
    <div class="guess container">
        <div class="c-t ttop clearfix">
            <div class="clearfix top fl">
                <span class="fl">人</span>
                <h2 class="fl">气单品</h2>
            </div>
        </div>
        <div class="changes mgb42">
            <div class="guess-ul">
                <div class="prolist clearfix">
                    <script>
                        for (let i = 0; i < 6; i++) {
                            document.write(`
                                        <div>
                                            <p><img src="../imgs/书籍/byx.jpg" alt=""></p>
                                            <p class="ti10">查理 史密斯1</p>
                                            <p class="ti10 c80">中国邮电出版社</p>
                                            <p class="ti10"> <span class=" cf4">&yen; 49</span> <del>&yen; 79</del> </p>
                                        </div>
                                    `)
                        }
                    </script>

                </div>
                </script>

            </div>
        </div>
    </div>

    <!-- 看了又看 -->
    <div class="goods container clearfix deta evaluate">
        <!-- 标题 -->
        <div class="fl">
            <p class="font22 color666 detailTitle">看了又看</p>
            <div class="left fl">
                <ul class="goods-list">
                    <!-- 产品列表 -->
                    <li>
                        <a href="#"><img src="../imgs/书籍/byx.jpg" alt=""></a>
                        <p><img src="../imgs/index05_18.jpg" alt=""></p>
                        <p>白夜行 东野上吾</p>
                        <p>￥:38<span>￥:58</span></p>

                    </li>
                    <li>
                        <a href="#"><img src="../imgs/书籍/byx.jpg" alt=""></a>
                        <p><img src="../imgs/index05_18.jpg" alt=""></p>
                        <p>白夜行 东野上吾</p>
                        <p>￥:38<span>￥:58</span></p>

                    </li>
                    <li>
                        <a href="#"><img src="../imgs/书籍/byx.jpg" alt=""></a>
                        <p><img src="../imgs/index05_18.jpg" alt=""></p>
                        <p>白夜行 东野上吾</p>
                        <p>￥:38<span>￥:58</span></p>

                    </li>
                    <li>
                        <a href="#"><img src="../imgs/书籍/byx.jpg" alt=""></a>
                        <p><img src="../imgs/index05_18.jpg" alt=""></p>
                        <p>白夜行 东野上吾</p>
                        <p>￥:38<span>￥:58</span></p>

                    </li>
                    <li>
                        <a href="#"><img src="../imgs/书籍/byx.jpg" alt=""></a>
                        <p><img src="../imgs/index05_18.jpg" alt=""></p>
                        <p>白夜行 东野上吾</p>
                        <p>￥:38<span>￥:58</span></p>

                    </li>
                    <li>
                        <a href="#"><img src="../imgs/书籍/byx.jpg" alt=""></a>
                        <p><img src="../imgs/index05_18.jpg" alt=""></p>
                        <p>白夜行 东野上吾</p>
                        <p>￥:38<span>￥:58</span></p>

                    </li>
                    <li>
                        <a href="#"><img src="../imgs/书籍/byx.jpg" alt=""></a>
                        <p><img src="../imgs/index05_18.jpg" alt=""></p>
                        <p>白夜行 东野上吾</p>
                        <p>￥:38<span>￥:58</span></p>

                    </li>
                    <li>
                        <a href="#"><img src="../imgs/书籍/byx.jpg" alt=""></a>
                        <p><img src="../imgs/index05_18.jpg" alt=""></p>
                        <p>白夜行 东野上吾</p>
                        <p>￥:38<span>￥:58</span></p>

                    </li>
                </ul>
            </div>

        </div>
        <div class="right fl clearfix">
            <!-- 标题 -->
            <div class="subp clearfix">
                <p class="fl fs20">商品介绍 </p>
                <p class="fl on fs20">评价（9999） </p>
            </div>
            <div>
                <div class="img">
                    <img src="../imgs/0.bmp" alt="">
                </div>
                <div class="clearfix tex">

                    <p class="fl colorff"><a href="#">全部评价（9999）</a> </p>
                    <p class="fl"><a href="#">好评（888）</a> </p>
                    <p class="fl"><a href="#">中评（888）</a> </p>
                    <p class="fl"><a href="#">差评（888）</a> </p>
                </div>
            </div>
            <div>
                <img class="img1 sb" src="../imgs/dadada.jpg" alt="">
                <div class="img2 act sb">
                    <script>
                        for (let i = 0; i < 12; i++) {
                            document.write(`
                           <img src="../imgs/11.bmp" alt="">
                           `)
                        }
                    </script>
                </div>

            </div>
            <ul class="clearfix fr">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>......</li>
                <li>下一页</li>
            </ul>
        </div>
    </div>

    <!-- 广告插图 -->
    <div class="advertising container finad">
        <a href="#"><img src="../images/02-广告_03.jpg" alt=""></a>
    </div>

    <!-- 图片插图 -->
    <div class="container"> <img class="container" src="../imgs/魔兽.jpg" alt=""></div>

    <!-- 页脚 -->
    <div class="foot container-fluid">

        <div class="c-t ttop clearfix">
        </div>
        <div class="foot-bgc">
            <div class="foot-bg clearfix">
                <p><img src="../imgs/222_11.png" alt=""></p>
                <p><img src="../imgs/222_13.png" alt=""></p>
                <p><img src="../imgs/222_15.png" alt=""></p>
                <p><img src="../imgs/222_17.png" alt=""></p>
            </div>
        </div>
        <div class="foot-tx clearfix">
            <ul class="mgr60">
                <li><a class="fwb fz18" href="#">购物指南</a></li>
                <li><a href="#">购物流程</a></li>
                <li><a href="#">发票制度</a></li>
                <li><a href="#">账户管理</a></li>
                <li><a href="#">会员优惠</a></li>
            </ul>
            <ul class="mgr60">
                <li><a class="fwb fz18" href="#">支付方式</a></li>
                <li><a href="#">货到付款</a></li>
                <li><a href="#">网上支付</a></li>
                <li><a href="#">礼品卡支付</a></li>
                <li><a href="#">银行转帐</a></li>
            </ul>
            <ul class="mgr60">
                <li><a class="fwb fz18" href="#">订单服务</a></li>
                <li><a href="#">订单配送查询</a></li>
                <li><a href="#">订单状态说明</a></li>
                <li><a href="#">自助取消订单</a></li>
                <li><a href="#">自助修改订单</a></li>
            </ul>
            <ul class="mgr60">
                <li><a class="fwb fz18" href="#">退换货</a></li>
                <li><a href="#">退换货政策</a></li>
                <li><a href="#">自助申请退换货</a></li>
                <li><a href="#">退换货进度查询</a></li>
                <li><a href="#">退款方式和时间</a></li>
            </ul>
            <ul>
                <li><a class="fwb fz18" href="#">商家服务</a></li>
                <li><a href="#">商家中心</a></li>
                <li><a href="#">运营服务</a></li>
                <li><a href="#">加入尾品汇</a></li>
            </ul>
        </div>
        <div class="footer">
            <p>
                <a class="mgr18" href="#">公司简介</a><span class="mgr18">丨</span>
                <a class="mgr18" href="#">Investor Relations</a><span class="mgr18">丨</span>
                <a class="mgr18" href="#">网站联盟</a><span class="mgr18">丨</span>
                <a class="mgr18" href="#">乐购招商</a><span class="mgr18">丨</span>
                <a class="mgr18" href="#">机构销售</a><span class="mgr18">丨</span>
                <a class="mgr18" href="#">手机乐购</a><span class="mgr18">丨</span>
                <a class="mgr18" href="#">官方Blog</a><span class="mgr18">丨</span>
                <a href="#">热词搜索</a>
            </p>
            <p><a href="#">Copyright (C)</a> <a href="#">乐购网 2004-2016</a><a href="#">All Rights Reserved</a></p>
        </div>
        <img src="../imgs/logo_00.png" alt="">
    </div>

</body>

</html>